<template>
  <v-collapse v-model="value1">
    <v-collapse-item
      :value="ele.name"
      :disabled="isDisable(ele)"
      v-for="(ele, index) in tokensData.procedures"
      :key="ele.name + index"
      @expanded="onVisibleChange"
    >
      <!-- 折叠面板头部 -->
      <div slot="header" class="tokens-agent__content__dtl__desc">
        <div class="tokens-agent__content__dtl__desc__detail">
          <!-- 状态图标 -->
          <v-icon
            v-if="ele.status === TOKENS_STATUS.error"
            name="basic_warning_line"
            style="color: #ff8345"
            remote
            size="16"
          />
          <v-icon
            v-else
            name="basic_finish_line"
            style="color: #0fb87f"
            remote
            size="16"
          />
          <span>{{ getTokenBoardTitle(ele) }}</span>
        </div>
        <!-- 折叠箭头图标 -->
        <v-icon
          :remote="true"
          name="arrow_down_small_line"
          size="12"
          class="tokens-agent__content__dtl__desc__icon"
          style="color: var(--color-text-caption)"
          :rotate="isCollapseOpen(ele.name) ? 180 : 0"
        ></v-icon>
      </div>

      <!-- 折叠面板内容 - 调试详情 -->
      <div
        slot="content"
        class="tokens-agent__content__msg"
        v-if="!isEmpty(ele.debugging)"
      >
        <div class="tokens-agent__content__msg__subtitle">请求信息：</div>
        <!-- 请求信息input -->
        <div class="tokens-agent__content__msg__info">
          <div class="tokens-agent__label">input</div>
          &nbsp;&nbsp;
          <JsonComponent
            :data="
              ele.debugging.agent && ele.debugging.agent.input
                ? ele.debugging.agent.input
                : ''
            "
          />
        </div>

        <div class="tokens-agent__content__subtitle">输出结果：</div>
        <div class="tokens-agent__content__msg__info">
          <div class="tokens-agent__label">output</div>
          &nbsp;&nbsp;
          <JsonComponent
            :data="
              ele.debugging.agent && ele.debugging.agent.output
                ? ele.debugging.agent.output
                : ''
            "
          />
        </div>

        <!-- traceid 信息 -->
        <div class="tokens-agent__content__msg__info">
          <div class="tokens-agent__label">traceid</div>
          &nbsp;&nbsp;
          <div>{{ tokensData.trace_id || "-" }}</div>
        </div>
      </div>
    </v-collapse-item>
  </v-collapse>
</template>

<script>
import VueMarkdown from "vue-markdown";
import { TOKENS_STATUS } from "@/constants";
import { replaceLinks } from "@/utils";
import { isJSON, convertToCapitalizedCamelCase, isEmpty } from "@/utils/util";
import JsonComponent from "./json-component.vue";
import VueJsonPretty from "vue-json-pretty";
import "vue-json-pretty/lib/styles.css";

export default {
  components: {
    VueMarkdown,
    JsonComponent,
    VueJsonPretty,
  },
  props: {
    // tokens数据对象
    tokensData: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      TOKENS_STATUS,
      value1: [], // 当前展开的面板
      isOpenDtl: [], // 记录节点展开状态
    };
  },
  methods: {
    replaceLinks,
    isJSON,
    isEmpty,
    convertToCapitalizedCamelCase,
    
    // 切换节点展开状态
    openRunNodes(m) {
      this.isOpenDtl[m.node_id] = !this.isOpenDtl[m.node_id];
      this.isOpenDtl = Object.assign({}, this.isOpenDtl);
    },
    
    // 格式化历史记录
    formatHistory(val) {
      if (val) {
        return val.map((obj) => ({
          user: obj.user,
          assistant: obj.assistant,
        }));
      }
    },
    
    // 判断是否禁用折叠项
    isDisable(ele) {
      if (!ele.debugging) {
        return true;
      }
      return false;
    },
    
    // 修复markdown有序列表格式
    fixMarkdownOrderedList(mdText) {
      if (!mdText) return mdText;
      const lines = mdText.split("\n");

      for (let i = 0; i < lines.length; i++) {
        if (/^\d+\.\s/.test(lines[i])) {
          if (lines[i + 1] && /^\d+\.\S/.test(lines[i + 1])) {
            lines[i + 1] = lines[i + 1].replace(/(\d+)\.(\S)/, "$1. $2");
          }
        }
      }

      return this.xssHandlerProcess(lines.join("\n"));
    },
    
    // 判断折叠项是否展开
    isCollapseOpen(val) {
      return this.value1.includes(val);
    },
    
    // 获取token面板标题
    getTokenBoardTitle(val) {
      if (val.resource_status === 2) {
        if (val.name === "search_engine") {
          return val.title + "失败，资源已用尽";
        }
      }
      return val.title;
    },
    
    // 折叠状态变化回调
    onVisibleChange(visible) {
      // 可以在这里处理折叠状态变化逻辑
    },
  },
};
</script>

<style lang="less" scoped>
div {
  box-sizing: border-box;
}

.tokens-agent {
  &-empty {
    padding: var(--spacing-tight) var(--spacing-none);
  }

  &__label {
    width: fit-content;
    white-space: nowrap;
    display: flex;
    padding: var(--spacing-super-tight) var(--spacing-tight);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-super-tight);
    border-radius: var(--radius-normal);
    background: var(--color-gray-2);
  }

  .tokens-agent__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    &__container {
      color: var(--color-text-caption);
      font-family: "PingFang SC";
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 16px;
      margin: 0 0 0 4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &__tk {
      color: var(--color-text-caption);
      font-family: "PingFang SC";
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 16px;
      margin: 0 4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &__icon {
      color: var(--color-text-caption);
      font-family: "PingFang SC";
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 16px;
      margin: 0 0 0 4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &__desc {
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 16px;
      display: flex;
      align-items: center;

      &.pending {
        color: var(--color-primary-normal);
      }

      &.success {
        color: var(--color-success-normal);
      }

      &.error {
        color: var(--color-error-normal);
      }

      &.finish {
        color: var(--color-text-caption);
      }
    }
  }

  &__content {
    display: flex;
    padding: var(--spacing-base);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-tight);
    align-self: stretch;
    border-radius: 0 0 var(--radius-large) var(--radius-large);
    border: var(--border-thickness) solid var(--color-border-normal);

    &__dtl {
      position: relative;
      width: 100%;
      padding: var(--spacing-base) var(--spacing-base-loose) var(--spacing-base)
        var(--spacing-base);
      color: var(--color-text-primary);
      font-family: "PingFang SC";
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 16px;
      display: flex;
      align-content: center;
      justify-content: space-between;

      &:last-child::after {
        display: none;
      }

      &__desc {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;

        &__detail {
          display: flex;
          align-items: center;
          gap: var(--spacing-base);
          color: var(--color-text-primary);
          font-size: 12px;
          font-style: normal;
          font-weight: 500;
          line-height: 16px;
        }

        &__icon {
          display: none;
        }
      }

      &__info {
        padding-left: 20px;
        margin-top: 10px;
        color: var(--color-text-caption);
        font-family: "PingFang SC";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;

        &.pending {
          color: var(--color-primary-normal);
        }

        &.success {
          color: var(--color-success-normal);
        }

        &.error {
          color: var(--color-error-normal);
        }

        &.finish {
          color: var(--color-text-caption);
        }
      }
    }

    &__msg {
      display: flex;
      padding: var(--spacing-base);
      flex-direction: column;
      gap: var(--spacing-base);
      align-self: stretch;
      color: var(--color-text-secondary);
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 16px;

      &__subtitle {
        font-weight: 500;
        color: var(--color-text-caption);
      }

      &__info {
        display: flex;
        align-items: baseline;

        /deep/ .answer-md p {
          word-break: break-all;
          word-wrap: break-word;
          margin: 0;
        }
      }

      &__doc {
        display: flex;
        align-items: center;
        cursor: pointer;
        gap: 5px;
        padding: 8px 0;
      }

      &__labeldesc {
        color: var(--color-primary-normal);
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
      }

      &__json {
        display: flex;
        flex-direction: column;
      }
    }
  }
}

.tokens-agent {
  /deep/ .v-collapse {
    width: 100%;
    display: grid;
    gap: 4px;
  }

  /deep/ .v-collapse-item {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    display: flex;
    align-content: center;
    justify-content: space-between;
    background: #fff;
    box-sizing: border-box;
  }

  /deep/ .v-collapse-item:hover {
    .tokens-agent__content__dtl__desc__icon {
      display: block;
    }
  }

  /deep/ .v-collapse-item__header {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: var(--spacing-base);
    cursor: pointer;
    background: #fff;
  }

  /deep/ .v-collapse-item__header:hover {
    border-radius: var(--radius-normal);
    background: var(--color-fill-hover);
  }

  /deep/ .v-collapse-item__content {
    border-top: none;
  }

  /deep/ .v-collapse-item.isShow {
    overflow: hidden;
  }
}
</style>